
<template>
  <div>
    <el-upload ref="uploadRef" :auto-upload="false" class="upload-demo" drag :before-upload="beforeUpload"
      :on-success="handleSuccess" :on-error="handleError" :http-request="customHttpRequesthandler" multiple>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          <!-- 根据需要添加提示信息 -->

          <el-button class="ml-3" type="success" @click="submitUpload">
            upload to server
          </el-button>
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  UploadFilled
} from '@element-plus/icons-vue'
import { customHttpRequest } from '@/util/firebaseUploader'; // 替换为你的具体路径
import type { UploadInstance } from 'element-plus'
const uploadRef = ref<UploadInstance>()
const files = ref<File[]>([]);
const beforeUpload = (file: File) => {
  // 在这里添加你的文件验证逻辑
  files.value.push(file);
  // return false; // 禁止 el-upload 组件自动上传
};
const handleSuccess = () => {
  console.log("success");
  // el-upload 组件的成功回调留空，因为我们手动处理了上传逻辑
};
const handleError = (error: any) => {
  console.error(`文件上传失败: ${error.message}`);
};

const customHttpRequesthandler = async () => {
  try {
    const urls = await customHttpRequest(files.value);
    console.log(urls); // 这里可以使用返回的URL列表进行后续操作
  } catch (error) {
    console.error(error);
  }

}

// 手动上传
const submitUpload = () => {
  uploadRef.value!.submit()
}
// firebase


</script>

<style lang="less" scoped></style>
